﻿<script setup lang="ts" name="EpButton">
import { storeToRefs } from 'pinia'
import { useAppStoreWithOut } from '@/store/modules/app'
const appStore = useAppStoreWithOut()
const { systemConfig } = storeToRefs(appStore)
</script>
<template>
  <PageWrap scroll>
    <el-space :size="systemConfig.space" fill>
      <el-row :gutter="systemConfig.space">
        <el-col :md="12" :sm="24" :xs="24">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>基础用法</span>
              </div>
            </template>
            <el-form label-position="right" label-width="100px">
              <ElFormItem label="默认按钮">
                <el-button>默认按钮</el-button>
                <el-button type="primary">主要按钮</el-button>
                <el-button type="success">成功按钮</el-button>
                <el-button type="info">信息按钮</el-button>
                <el-button type="warning">警告按钮</el-button>
                <el-button type="danger">危险按钮</el-button>
              </ElFormItem>
              <ElFormItem label="朴素按钮">
                <el-button plain>默认按钮</el-button>
                <el-button type="primary" plain>主要按钮</el-button>
                <el-button type="success" plain>成功按钮</el-button>
                <el-button type="info" plain>信息按钮</el-button>
                <el-button type="warning" plain>警告按钮</el-button>
                <el-button type="danger" plain>危险按钮</el-button>
              </ElFormItem>
              <ElFormItem label="圆角按钮">
                <el-button round>默认按钮</el-button>
                <el-button type="primary" round>主要按钮</el-button>
                <el-button type="success" round>成功按钮</el-button>
                <el-button type="info" round>信息按钮</el-button>
                <el-button type="warning" round>警告按钮</el-button>
                <el-button type="danger" round>危险按钮</el-button>
              </ElFormItem>
              <ElFormItem label="圆形图标按钮">
                <el-button icon="Search" circle />
                <el-button type="primary" icon="Edit" circle />
                <el-button type="success" icon="Check" circle />
                <el-button type="info" icon="Message" circle />
                <el-button type="warning" icon="Star" circle />
                <el-button type="danger" icon="Delete" circle />
              </ElFormItem>
            </el-form>
          </el-card>
        </el-col>
        <el-col :md="12" :sm="24" :xs="24">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>禁用状态</span>
              </div>
            </template>
            <el-form label-position="right" label-width="100px">
              <ElFormItem label="默认按钮">
                <el-button disabled>默认按钮</el-button>
                <el-button type="primary" disabled>主要按钮</el-button>
                <el-button type="success" disabled>成功按钮</el-button>
                <el-button type="info" disabled>信息按钮</el-button>
                <el-button type="warning" disabled>警告按钮</el-button>
                <el-button type="danger" disabled>危险按钮</el-button>
              </ElFormItem>
              <ElFormItem label="朴素按钮">
                <el-button plain disabled>默认按钮</el-button>
                <el-button type="primary" plain disabled>主要按钮</el-button>
                <el-button type="success" plain disabled>成功按钮</el-button>
                <el-button type="info" plain disabled>信息按钮</el-button>
                <el-button type="warning" plain disabled>警告按钮</el-button>
                <el-button type="danger" plain disabled>危险按钮</el-button>
              </ElFormItem>
              <ElFormItem label="圆角按钮">
                <el-button round disabled>默认按钮</el-button>
                <el-button type="primary" round disabled>主要按钮</el-button>
                <el-button type="success" round disabled>成功按钮</el-button>
                <el-button type="info" round disabled>信息按钮</el-button>
                <el-button type="warning" round disabled>警告按钮</el-button>
                <el-button type="danger" round disabled>危险按钮</el-button>
              </ElFormItem>
              <ElFormItem label="圆形图标按钮">
                <el-button icon="Search" circle disabled />
                <el-button type="primary" icon="Edit" circle disabled />
                <el-button type="success" icon="Check" circle disabled />
                <el-button type="info" icon="Message" circle disabled />
                <el-button type="warning" icon="Star" circle disabled />
                <el-button type="danger" icon="Delete" circle disabled />
              </ElFormItem>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>文字按钮</span>
              </div>
            </template>
            <el-form>
              <ElFormItem>
                <el-button text type="primary">文字按钮</el-button>
                <el-button text type="primary" disabled>文字禁用按钮</el-button>
              </ElFormItem>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>element plus内置图标按钮</span>
              </div>
            </template>
            <el-form>
              <ElFormItem>
                <el-button type="primary" icon="Edit" />
                <el-button type="primary" icon="Star" />
                <el-button type="primary" icon="Delete" />
                <el-button type="primary" icon="Search">搜索</el-button>
                <el-button type="primary">
                  上传
                  <svg-icon class="el-icon--right" icon="ep:upload" />
                </el-button>
                <el-button text icon="Search">图标文字按钮</el-button>
              </ElFormItem>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>自定义图标按钮</span>
              </div>
            </template>
            <el-form>
              <ElFormItem>
                <el-button type="primary">
                  <svg-icon class="el-icon--left" icon="ii:icon-sun" />
                  太阳
                </el-button>
                <el-button type="primary">
                  月亮
                  <svg-icon class="el-icon--right" icon="ii:icon-moon" />
                </el-button>
                <el-button type="primary"><svg-icon icon="ii:icon-sousuo" /></el-button>
              </ElFormItem>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>按钮组</span>
              </div>
            </template>
            <el-form>
              <ElFormItem>
                <el-button-group>
                  <el-button type="primary" icon="ArrowLeft">上一页</el-button>
                  <el-button type="primary">
                    下一页
                    <svg-icon class="el-icon--right" icon="ep:arrow-right" />
                  </el-button>
                </el-button-group>
                <el-button-group>
                  <el-button type="primary" icon="CirclePlus" />
                  <el-button type="primary" icon="Edit" />
                  <el-button type="primary" icon="Delete" />
                </el-button-group>
              </ElFormItem>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>加载中</span>
              </div>
            </template>
            <el-form>
              <ElFormItem>
                <el-button type="primary" loading>加载中</el-button>
                <el-button text loading>加载中</el-button>
              </ElFormItem>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>各种尺寸的按钮</span>
              </div>
            </template>
            <el-form>
              <ElFormItem label="大型按钮">
                <el-button size="large">默认按钮</el-button>
                <el-button size="large" plain>朴素按钮</el-button>
                <el-button size="large" round>圆角按钮</el-button>
                <el-button size="large" icon="Search">图标按钮</el-button>
                <el-button size="large" icon="Search" circle />
              </ElFormItem>
              <ElFormItem label="默认按钮">
                <el-button>默认按钮</el-button>
                <el-button plain>朴素按钮</el-button>
                <el-button round>圆角按钮</el-button>
                <el-button icon="Search">图标按钮</el-button>
                <el-button icon="Search" circle />
              </ElFormItem>
              <ElFormItem label="小型按钮">
                <el-button size="small">默认按钮</el-button>
                <el-button size="small" plain>朴素按钮</el-button>
                <el-button size="small" round>圆角按钮</el-button>
                <el-button size="small" icon="Search">图标按钮</el-button>
                <el-button size="small" icon="Search" circle />
              </ElFormItem>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>自定义按钮颜色</span>
              </div>
            </template>
            <el-form>
              <ElFormItem label="基础用法">
                <el-button color="#626aef" style="color: #fff;">默认按钮</el-button>
                <el-button color="#626aef" plain>朴素按钮</el-button>
                <el-button color="#626aef" style="color: #fff;" round>圆角按钮</el-button>
                <el-button color="#626aef" style="color: #fff;" icon="Search" circle />
              </ElFormItem>
              <ElFormItem label="禁用状态">
                <el-button color="#626aef" style="color: #fff;" disabled>默认按钮</el-button>
                <el-button color="#626aef" plain disabled>朴素按钮</el-button>
                <el-button color="#626aef" style="color: #fff;" round disabled>圆角按钮</el-button>
                <el-button color="#626aef" style="color: #fff;" icon="Search" circle disabled />
              </ElFormItem>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </el-space>
  </PageWrap>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}
</style>
